import React, { useEffect, useState } from 'react';
import { ArrowsAltOutlined, FileZipOutlined, ShrinkOutlined } from '@ant-design/icons'
import { Input, Popover } from 'antd';
import { useTranslation } from 'react-i18next';

import SubmitBtnCom from '@src/components/SubmitBtnCom';

import styles from './styles.module.less';

const SumitInputCom = ({
  submitFun = () => { },
  setIsSubmitMax = () => { },
  chatLoading = false
}) => {
  const { t } = useTranslation();

  const [isMagnify, setIsMagnify] = useState(false);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    setIsSubmitMax(isMagnify);
  }, [isMagnify]);

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && e.shiftKey) {
      e.preventDefault(); // 阻止默认的换行行为
      if (inputValue.trim() !== '') {
        console.log('Submitted value:', inputValue);
        setInputValue(''); // 清空输入框的值
        submitFun(inputValue);
      } else {
        console.log('Input is empty. Cannot submit.');
      }
    }
  };


  return (
    <div className={styles.sumitInput_com}>
      <div className={styles.content_box}>
        <div className={styles.tab_box}>
          <div className={styles.tab_list}>
            <ul className={styles.list_box}>
              {/* <li>
                <Popover
                  color="#828bf5"
                  placement="topLeft"
                  overlayStyle={{
                    // borderRadius: 10,
                    // overflow: 'hidden' 
                  }}
                  content={
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ color: '#fff' }}>一次最多上传1个文件</div>
                      <div style={{ color: '#d4d8fb' }}>格式Word/PDF，单个最大10MB</div>
                    </div>
                  }
                >
                  <div className={styles.name}>
                    <FileZipOutlined />
                    <span>文件</span>
                  </div>
                </Popover>
              </li>
              <li>
                <Popover
                  color="#828bf5"
                  overlayStyle={{
                    // borderRadius: 10,
                    // overflow: 'hidden' 
                  }}
                  content={
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ color: '#fff' }}>当前支持上传1张图片</div>
                      <div style={{ color: '#d4d8fb' }}>最大10MB</div>
                    </div>
                  }
                >
                  <div className={styles.name}>
                    <FileZipOutlined />
                    <span>图片</span>
                  </div>
                </Popover>
              </li> */}
            </ul>
            <div className={styles.magnify}>
              <div className={styles.icon_box}>
                {
                  isMagnify ? (
                    <ShrinkOutlined style={{ color: '#625b88', fontSize: 18 }} onClick={() => {
                      setIsMagnify(false);
                    }} />
                  ) : (
                    <ArrowsAltOutlined style={{ color: '#625b88', fontSize: 18 }} onClick={() => {
                      setIsMagnify(true);
                    }} />
                  )
                }
              </div>
            </div>
          </div>
          <div className={styles.border_box} />
        </div>
        <div className={styles.text_area_box}>
          <Input.TextArea
            bordered={false}
            autoSize={{
              maxRows: isMagnify ? 26 : 8,
              minRows: isMagnify ? 26 : 2
            }}
            placeholder={t("Use shift + enter to change line")}
            onInput={(e) => setInputValue(e.target.value)}
            value={inputValue}
            onKeyPress={handleKeyPress}
          />
        </div>
        <div className={styles.submit_box}>
          <div onClick={() => {
            if (inputValue.trim() !== '') {
              submitFun(inputValue);
              setInputValue('');
            } else {
              console.log('Input is empty. Cannot submit.');
            }
          }}>
            <SubmitBtnCom loading={chatLoading} />
          </div>
        </div>
      </div>
    </div>
  )
};

export default SumitInputCom;